const HtmlWebpackPlugin=require("html-webpack-plugin")
const {resolve}=require("path")
module.exports={
    entry: "./src/index.js",
    output: {
        filename: "js/built.js",
        path: resolve(__dirname,"build")
    },
    module: {
        rules: [
            /**
             * js兼容性处理：babel-loader  @babel/core
             *  1.基本兼容性处理：@babel/preset-env
             *      问题：只解决基础语法，promise等高级语法无法识别
             *  2.全部js兼容性处理-->@babel/polyfill
             *      问题：我只解决部分兼容性问题，但是将全部兼容性代码引入
             *  3.需要做兼容性处理的就按需加载-->core-js
             *
             */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    //预设，指示babel做怎样的兼容性处理
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns:"usage",
                                corejs: {
                                    version:3
                                },
                                //指定兼容性做到哪个浏览器的哪个版本
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17'
                                }
                            }
                        ]

                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "production"
}
